import React from "react";
import { View, Text, TouchableOpacity } from "react-native";
import { useTheme } from "@/contexts/ThemeContext";
import { Ionicons, MaterialIcons, FontAwesome5 } from "@expo/vector-icons";
import { createStyles } from "./index.style";

const GroupApplication = () => {
  const { colors } = useTheme();
  const styles = createStyles(colors);

  const handleFilePress = () => {
    console.log("File pressed");
    // 处理文件应用点击逻辑
  };

  const handlePhotoPress = () => {
    console.log("Photo pressed");
    // 处理相册应用点击逻辑
  };

  const handleStickerPress = () => {
    console.log("Sticker pressed");
    // 处理表情包应用点击逻辑
  };

  const handleViewMore = () => {
    console.log("View more applications");
    // 处理查看更多应用逻辑
  };

  return (
    <View style={styles.container}>
      <View style={styles.header}>
        <Text style={styles.title}>群应用</Text>
        <TouchableOpacity style={styles.viewMore} onPress={handleViewMore}>
          <Text style={styles.viewMoreText}>更多</Text>
          <Ionicons
            name="chevron-forward"
            size={16}
            color={colors.text.secondary}
          />
        </TouchableOpacity>
      </View>

      <View style={styles.applicationsContainer}>
        <TouchableOpacity style={styles.item} onPress={handleFilePress}>
          <View style={styles.fileIcon}>
            <MaterialIcons name="folder" size={28} color="#FFFFFF" />
          </View>
          <Text style={styles.itemTitle}>文件</Text>
        </TouchableOpacity>

        <TouchableOpacity style={styles.item} onPress={handlePhotoPress}>
          <View style={styles.photoIcon}>
            <MaterialIcons name="photo-library" size={28} color="#FFFFFF" />
          </View>
          <Text style={styles.itemTitle}>相册</Text>
        </TouchableOpacity>

        <TouchableOpacity style={styles.item} onPress={handleStickerPress}>
          <View style={styles.stickerIcon}>
            <FontAwesome5 name="smile" size={24} color="#FFFFFF" />
          </View>
          <Text style={styles.itemTitle}>表情包</Text>
        </TouchableOpacity>
      </View>
    </View>
  );
};

export default GroupApplication;
